<template>
  <div class="scroll-chart">
    <div class="chart-title">{{ title }}</div>
    <div class="scroll-container">
      <div class="scroll-list" ref="scrollList">
        <div 
          v-for="(item, index) in displayData" 
          :key="index"
          class="scroll-item"
          :class="{ 'active': index === currentIndex }"
        >
          <div class="rank">{{ item.rank }}</div>
          <div class="name">{{ item.name }}</div>
          <div class="value">{{ item.value }}</div>
          <div class="progress-bar">
            <div 
              class="progress-fill"
              :style="{ 
                width: item.percentage + '%',
                backgroundColor: item.color
              }"
            ></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ScrollChart',
  props: {
    title: {
      type: String,
      default: '排名轮播表'
    },
    data: {
      type: Array,
      default: () => [
        { rank: 1, name: '北京', value: '98.5%', percentage: 98, color: '#00d4ff' },
        { rank: 2, name: '上海', value: '95.2%', percentage: 95, color: '#00ff88' },
        { rank: 3, name: '广州', value: '92.8%', percentage: 93, color: '#ff6b6b' },
        { rank: 4, name: '深圳', value: '89.1%', percentage: 89, color: '#ffd93d' },
        { rank: 5, name: '杭州', value: '85.7%', percentage: 86, color: '#6c5ce7' },
        { rank: 6, name: '南京', value: '82.3%', percentage: 82, color: '#fd79a8' },
        { rank: 7, name: '成都', value: '78.9%', percentage: 79, color: '#fdcb6e' },
        { rank: 8, name: '武汉', value: '75.4%', percentage: 75, color: '#e17055' }
      ]
    },
    visibleCount: {
      type: Number,
      default: 5
    }
  },
  data() {
    return {
      currentIndex: 0,
      scrollTimer: null
    }
  },
  computed: {
    displayData() {
      return this.data.slice(this.currentIndex, this.currentIndex + this.visibleCount)
    }
  },
  mounted() {
    this.startScroll()
  },
  beforeDestroy() {
    this.stopScroll()
  },
  methods: {
    startScroll() {
      this.scrollTimer = setInterval(() => {
        this.currentIndex = (this.currentIndex + 1) % (this.data.length - this.visibleCount + 1)
      }, 3000)
    },
    stopScroll() {
      if (this.scrollTimer) {
        clearInterval(this.scrollTimer)
      }
    }
  }
}
</script>

<style scoped>
.scroll-chart {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.chart-title {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;
}

.scroll-container {
  height: calc(100% - 60px);
  overflow: hidden;
}

.scroll-list {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.scroll-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.scroll-item.active {
  background: rgba(0, 212, 255, 0.1);
  border-color: rgba(0, 212, 255, 0.3);
  transform: scale(1.02);
}

.rank {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(45deg, #00d4ff, #00ff88);
  color: #000;
  font-weight: bold;
  font-size: 14px;
  border-radius: 50%;
}

.name {
  flex: 1;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
}

.value {
  color: #00d4ff;
  font-size: 14px;
  font-weight: bold;
  min-width: 60px;
  text-align: right;
}

.progress-bar {
  width: 80px;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s ease;
}
</style>